<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title>CSS Cookbook: media objects</title>

    <link rel="stylesheet" href="styles.css">

    <style>
        img {
            max-width: 100%;
            display: block;
        }
        p {
            margin: 0 0 1em 0;
        }

    
    </style>

    <style class="editable">
        @media (min-width: 500px) {
            /* clearfix*/
            .media:after {
                content: "";
                display: table;
                clear: both;
            }

            .media {
                display: grid;
                grid-template-columns: fit-content(200px) 1fr;
                grid-template-rows: 1fr auto;
                grid-template-areas:
                "image content"
                "image footer";
                grid-gap: 20px;
                margin-bottom: 4em;
            }

            .media-flip {
                grid-template-columns: 1fr fit-content(200px);
                grid-template-areas:
                "content image"
                "footer image";
            }

            .media > .media {
                grid-column-start: 2;
                clear: both;
            }
            
            .media-flip > .media {
                grid-column-start: 1;
            }

            .img {
                float: left;
                margin-right: 20px;
                max-width: 200px;
                grid-area: image;
            }
            
            .media-flip .img {
                float: right;
                margin: 0 0 0 20px;
            }

            .content {
                grid-area: content;
            }

            .footer {
                grid-area: footer;
            }
            
            @supports(display: grid) {
                .media:after {
                content: none;
                }
                
                .img,
                .media-flip .img{
                max-width: 100%;
                margin: 0;
                
                }
            }
         } 
    </style>

</head>

<body>
    <section class="preview">
        <div class="media">

            <div class="img">
                <img src="balloon-sq2.jpg" alt="Balloons">
            </div>

            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                    maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
                    aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
                    condimentum.</p>
            </div>
            <div class="footer">
                An optional footer goes here.
            </div>
        </div>

        <div class="media">

            <div class="img">
                <img src="sharp-account_box-24px.svg" width="80px" alt="Account">
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                    maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
                    aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
                    condimentum.</p>
            </div>
            <div class="footer"></div>
        </div>

        <div class="media media-flip">

            <div class="img">
                <img src="balloon-sq2.jpg" alt="Balloons">
            </div>

            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                    maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
                    aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
                    condimentum.</p>
            </div>
            <div class="footer">
                An optional footer goes here.
            </div>
        </div>

        <div class="media">

            <a class="img">
                <img src="balloon-sq2.jpg" alt="Balloons">
            </a>

            <div class="content">

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                    maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et
                    aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis
                    condimentum.</p>
            </div>

            <div class="footer"></div>

            <div class="media">

                <a class="img">
                    <img src="balloon-sq2.jpg" alt="Balloons">
                </a>

                <div class="content">

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet
                        maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales
                        tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor
                        venenatis condimentum.</p>
                </div>

                <div class="footer"></div>

            </div>

        </div>
    </section>

    <textarea class="playable playable-css">
@media (min-width: 500px) {
    /* clearfix*/
    .media:after {
        content: "";
        display: table;
        clear: both;
    }
    
    .media {
        display: grid;
        grid-template-columns: fit-content(200px) 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
        "image content"
        "image footer";
        grid-gap: 20px;
        margin-bottom: 4em;
    }
    
    .media-flip {
        grid-template-columns: 1fr fit-content(200px);
        grid-template-areas:
        "content image"
        "footer image";
    }
    
    .media > .media {
        grid-column-start: 2;
        clear: both;
    }
    
    .media-flip > .media {
        grid-column-start: 1;
    }
    
    .img {
        float: left;
        margin-right: 20px;
        max-width: 200px;
        grid-area: image;
    }
    
    .media-flip .img {
        float: right;
        margin: 0 0 0 20px;
    }
    
    .content {
        grid-area: content;
    }
    
    .footer {
        grid-area: footer;
    }
    
    @supports(display: grid) {
        .media:after {
        content: none;
        }
        
        .img,
        .media-flip .img{
        max-width: 100%;
        margin: 0;
        
        }
    }
    }
</textarea>

    <textarea class="playable playable-html">
<div class="media">

    <div class="img">
    <img src="balloon-sq2.jpg" alt="Balloons">
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
</div>
<div class="footer">
    An optional footer goes here.
</div>
</div>

<div class="media">

<div class="img">
    <img src="sharp-account_box-24px.svg" width="80px" alt="Account">
</div>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
</div>
<div class="footer"></div>
</div>

<div class="media media-flip">

<div class="img">
    <img src="balloon-sq2.jpg" alt="Balloons">
</div>

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
</div>
<div class="footer">
    An optional footer goes here.
</div>
</div>

<div class="media">

<a class="img">
    <img src="balloon-sq2.jpg" alt="Balloons">
</a>

<div class="content">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
</div>

<div class="footer"></div>

<div class="media">

    <a class="img">
    <img src="balloon-sq2.jpg" alt="Balloons">
    </a>

    <div class="content">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vehicula vitae ligula sit amet maximus. Nunc auctor neque ipsum, ac porttitor elit lobortis ac. Vivamus ultrices sodales tellus et aliquam. Pellentesque porta sit amet nulla vitae luctus. Praesent quis risus id dolor venenatis condimentum.</p>
    </div>

    <div class="footer"></div>

</div>

</div>
</textarea>

    <div class="playable-buttons">
        <input id="reset" type="button" value="Reset">
    </div>
</body>
<script src="playable.js"></script>

</html>